<!--
 * @Author: guojinxin_hub 1907745233@qq.com
 * @Date: 2023-12-24 12:01:49
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @LastEditTime: 2024-09-20 14:50:21
 * @FilePath: \yongqing-county\src\components\home\FacilitiesCondition.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="facilities">
    <img :src="'/img/首页/' + imgSrc" />

    <div class="content">
      <img class="img_line" src="/img/首页/横线.png" />
      <div class="val_div">
        <span class="value">{{ value }}</span
        ><span class="unit">{{ unit }}</span>
      </div>
      <div class="name">{{ name }}</div>
      <img class="img_line" src="/img/首页/横线.png" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'FacilitiesCondition',
  props: {
    imgSrc: {
      type: String,
      default: 'facilities_one.png',
    },
    name: {
      type: String,
      default: '默认标题',
    },
    unit: {
      type: String,
      default: 'km',
    },
    value: {
      type: Number,
      default: 1111,
    },
    setup(props) {
      return {
        props,
      }
    },
  },
}
</script>
<style scoped lang="scss">
.facilities {
  display: flex;
  align-items: center;
  margin-top: 22px;
  .content {
    .val_div {
      position: relative;
      top: 6px;
    }
    .img_line {
      height: 5px;
      width: 177px;
    }
    margin-left: 22px;
    // line-height: 37px;
    .value {
      font-size: 34px;
      font-weight: bold;
      color: #ffcf80;
      line-height: 26px;
      text-shadow: 2px -1px 2px rgba(255, 207, 128, 0.6);
      line-height: 37px;
    }
    .name {
      font-size: 17px;
      font-weight: 400;
      color: #b9e1fc;
      line-height: 31px;
      position: relative;
      top: 4px;
    }
  }
  .unit {
    font-size: 17px;
    font-weight: 400;
    color: #b9e1fc;
    line-height: 31px;
    margin-left: 11px;
  }
  img {
    width: 80px;
    height: 79px;
    // @include wHeight(82);
  }
}
</style>
